$color: rgb(255, 138, 0);

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 100px;
}

header {
    width: 100vw;
    // height: .5rem;
    background-color: $color;
    display: flex;
    align-items: center;

    // justify-content:space-around;
    .logo {
        width: .8rem;
        height: .3rem;
        margin-left: .3rem;
        margin-top: .1rem;
        margin-bottom: .1rem;
    }

    .my {
        width: .3rem;
        height: .3rem;
        margin-left: 1.6rem;
        margin-top: .1rem;
        margin-bottom: .1rem;
    }

    .xiazai {
        width: .3rem;
        height: .3rem;
        margin-left: .2rem;
        margin-right: .3rem;
        margin-top: .05rem;
        margin-bottom: .05rem;
    }
}

main {
    .bgc {
        width: 100vw;
        height: 2.6rem;
        background: url(../imgs/index/banner.png) no-repeat;
        background-size: cover;
        position: relative;

        input {
            width: 3rem;
            height: .4rem;
            padding-left: .35rem;
            border-radius: 5px;
            position: absolute;
            top: 2.1rem;
            left: .2rem;
            // font-size: .16rem;
        }

        img {
            width: .3rem;
            position: absolute;
            top: 2.18rem;
            left: .23rem;
        }
    }

    .inco {
        width: 100vw;
        background-color: $color;

        ul {
            display: flex;
            justify-content: space-evenly;

            li {
                font-size: .15rem;
                list-style: none;
                color: aliceblue;
                margin-top: .2rem;
                margin-bottom: .2rem;

                img {
                    width: .4rem;
                }
            }
        }
    }

    .bgc2 {
        img {
            width: 100vw;
            height: 2.6rem;
        }
    }

    .hot {
        width: 100vw;
        background-color: $color;

        h1 {
            color: aliceblue;
            padding-top: .2rem;
            font-size: .3rem;
            padding-left: .2rem;
        }

        h3 {
            color: aliceblue;
            padding-bottom: .2rem;
            font-size: .2rem;
            padding-left: .2rem;
        }
    }

    .hot-bottom {
        #last {
            border: none;
        }

        .big-box {
            margin-left: .2rem;
            margin-right: .2rem;
            width: 90vw;
            padding-top: .2rem;
            padding-bottom: .2rem;
            border-bottom: 1px solid rgb(255, 30, 30);
            // justify-content: center;
            display: flex;

            img {
                width: 1rem;
                height: 1rem;

            }

            .small-box {
                margin-left: .1rem;
                display: flex;
                flex-direction: column;

                h2 {
                    font-size: .2rem;
                    display: flex;
                }

                .p-1 {
                    display: flex;
                    justify-content: space-between;
                    margin-top: .08rem;

                    span {
                        font-size: .12rem;
                        color: rgb(47, 49, 48);
                    }

                    .span {
                        color: rgb(255, 131, 50);
                    }
                }

                .p-2 {
                    display: flex;
                    justify-content: space-between;
                    margin-top: .08rem;

                    span {
                        font-size: .12rem;
                        color: rgb(92, 92, 87);
                    }
                }

                .p-3 {
                    display: flex;
                    font-size: .12rem;
                    color: rgb(56, 111, 143);
                    margin-top: .08rem;
                }
            }
        }
    }

    .list {
        font-size: .2rem;
        display: flex;
        list-style: none;
        justify-content: center;
        margin-top: .05rem;

        li:nth-child(1) {
            border-bottom: 3px solid $color;
            color: $color;
        }

        li {
            flex: 1;
            text-align: center;
            margin-top: .1rem;
            padding-bottom: .1rem;
            border-bottom: 1px solid $color;
            border-top: 1px solid rgb(235, 235, 227);
            padding-top: .1rem;
        }
    }

    .two-list {
        display: flex;
        .list-left {
            font-size: .14rem;
            list-style: none;
            flex: 1;
            margin: .15rem .15rem;
            line-height: .25rem;
            color: rgb(105, 105, 100);
        }

        .list-right {
            font-size: .14rem;
            list-style: none;
            flex: 1;
            margin: .15rem .15rem;
            line-height: .25rem;
            color: rgb(105, 105, 100);           
        }
    }
    .report{
        width: 100vw;
        height: .8rem;
        background-color: rgba(0, 0, 0, 0.74);
        display: flex;
        position: fixed;
        bottom: 0;
        .remove{
            .close{
                width: .2rem;
                height: .2rem;
                position: absolute;
                top: 0;
                left: 0;
                // background-color: black;
                z-index: 20;
            }
        }
        .logo1{
            width: .5rem;
            height: .5rem;
            margin: .15rem .2rem .15rem .35rem;
            // flex: 1;
        }
        .report-center{
            margin: .15rem .15rem;
            p{
                font-size: .18rem;
                color: aliceblue;
            }
            p:nth-child(2){
                font-size: .12rem;
            }
        }
        .report-right{
            display: flex;
            // flex: 1;
            width: 1.2rem;
            height: .8rem;
            background-color: $color;
            font-size: .25rem;
            justify-content: center;
            line-height: .8rem;
            color: aliceblue;
        }
    }
}











footer {
    width: 100vw;
    // height: 2rem;
    background-color: rgb(47, 49, 48);
    display: flex;
    flex-direction: column;

    // position: absolute;
    // bottom: 0;
    .footer-top {
        width: 90vw;
        height: .3rem;
        font-size: .16rem;
        color: rgb(179, 178, 154);
        margin: .1rem auto;
        border-bottom: 1px solid rgb(180, 179, 151);
        padding-bottom: .1rem;
    }

    .footer-center {
        width: 100%;
        // background-color: aquamarine;
        display: flex;

        .left {
            display: flex;

            img {
                display: flex;
                width: .3rem;
                height: .3rem;
                margin: .2rem;
            }

            p {
                font-size: .14rem;
                flex-direction: row;
                margin-top: .15rem;
                color: rgb(180, 179, 151);
            }
        }

        .right {
            display: flex;

            img {
                display: flex;
                width: .3rem;
                height: .3rem;
                margin: .2rem .2rem .2rem .8rem;
            }

            p {
                font-size: .14rem;
                flex-direction: row;
                margin-top: .15rem;
                color: rgb(180, 179, 151);
            }
        }
    }

    .footer-bottom {
        p {
            font-size: .15rem;
            color: rgb(180, 179, 151);
            text-align: center;
            margin-bottom: .1rem;
        }
    }
}